<script lang="ts">
import {Graph,} from '@antv/x6'
import {defineComponent, onMounted, reactive} from "vue";
import { register, getTeleport } from '@antv/x6-vue-shape'
import { Snapline } from '@antv/x6-plugin-snapline'
import ProgressNode from "@/components/x6_flow/components/ProgressNode.vue";
register({
  shape: 'custom-vue-node',
  width: 100,
  height: 100,
  component: ProgressNode,
})
const TeleportContainer = getTeleport()
export default defineComponent({
  name: 'X6Flow',
  components: {
    TeleportContainer,
  },
  mounted() {
    init()
  },
})
const data  ={
  nodes: [
    {
      id: 'node0',
      shape: 'custom-vue-node',
      x: 100,
      y: 100,
    },
    {
      id: 'node1',
      shape: 'rect',
      x: 40,
      y: 40,
      width: 100,
      height: 40,
      label: 'hello',
      attrs: {
        // body 是选择器名称，选中的是 rect 元素
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6,
        },
      },
    },
    {
      id: 'node2',
      shape: 'rect',
      x: 160,
      y: 180,
      width: 100,
      height: 40,
      label: 'world',
      attrs: {
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6,
        },
      },
    },
  ],
  edges: [
    {
      shape: 'edge',
      source: 'node1',
      target: 'node2',
      label: 'x6',
      attrs: {
        // line 是选择器名称，选中的边的 path 元素
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
        },
      },
    },
  ],
}
const init = () => {
  //获取可视范围高度
  const height = window.innerHeight - 114;
  const width = window.innerWidth - 200;
  const graph = new Graph({
    container: document.getElementById('container')!,
    background: {
      color: '#F2F7FA',
    },
    width: width,
    height: height,
    grid: {
      visible: true,
      type: 'doubleMesh',
      args: [
        {
          color: '#eee', // 主网格线颜色
          thickness: 1, // 主网格线宽度
        },
        {
          color: '#ddd', // 次网格线颜色
          thickness: 1, // 次网格线宽度
          factor: 4, // 主次网格线间隔
        },
      ],
    },
    autoResize: true,
  })
  console.log(graph)
  // graph.addNode({
  //   shape: 'custom-vue-node',
  //   x: 100,
  //   y: 100,
  // })
  graph.fromJSON(data) // 渲染元素
  // graph.centerContent() // 居中显示
  graph.use(
    new Snapline({
      enabled: true,
    }),
  )

}
</script>

<template>
  <div class="app-content">
    <div id="container">2</div>
    <TeleportContainer />
  </div>
</template>

<style scoped>

</style>
